<template>
  <div class="randoms-preview">
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="900px" @close="close()">
      <el-row>
        <el-col :span="6">【题型】:{{ diaglogData.questionType | tx }} </el-col>
        <el-col :span="6">【编号】:{{ diaglogData.id }} </el-col>
        <el-col :span="6">【难度】:{{ diaglogData.difficulty | nd }}</el-col>
        <el-col :span="6">【标签】:{{ diaglogData.tags }}</el-col>
        <el-col :span="6">【学科】:{{ diaglogData.subjectName }}</el-col>
        <el-col :span="6">【目录】:{{ diaglogData.catalogID }}</el-col>
        <el-col :span="6">【方向】:{{ diaglogData.direction }}</el-col>
      </el-row>
      <hr />
      【题干】：
      <div v-html="diaglogData.question" style="color: blue"></div>
      <div v-if="diaglogData.questionType !== '3'">
        <div style="padding-bottom: 5px">{{ diaglogData.questionType | tx }}选项：（以下选中的选项为正确答案）</div>
        <div v-for="item in diaglogData.options" :key="item.code" style="padding: 8px 0">
          <el-radio v-if="diaglogData.questionType === '1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
          <el-checkbox v-if="diaglogData.questionType === '2'" :value="item.isRight ? true : false">
            {{ item.title }}
          </el-checkbox>
        </div>
      </div>

      <hr />
      【参考答案】：<el-button type="danger" size="small" @click="openVideo">视频答案预览</el-button>
      <div class="video" v-show="play">
        <video ref="video" :src="diaglogData.videoURL" controls></video>
      </div>
      <hr />
      【答案解析】：
      <div style="display: inline-block" v-html="diaglogData.answer"></div>

      <hr />
      【题目备注】：{{ diaglogData.remarks }}

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from "@/api/hmmm/constants";
import { detail } from "@/api/hmmm/questions";
export default {
  // 组件名称
  name: "RandomsPreview",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    data: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    nd(value) {
      if (value) return difficulty.find((item) => item.value === +value).label;
    },
    tx(value) {
      if (value) return questionType.find((item) => item.value === +value).label + "题";
    },
  },
  // 组件状态值
  data() {
    return {
      diaglogData: {},
      dialogVisible: false,
      play: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {},
  mounted() {},
  // 组件方法s
  methods: {
    async open() {
      this.dialogVisible = true;
      const data = await detail({ id: this.data.id });
      console.log(data);
      this.diaglogData = data.data;
    },
    openVideo() {
      this.play = true;
      this.$refs.video.play();
    },
    close() {
      this.play = false;
      this.$refs.video.pause();
    },
  },
};
</script>

<style scoped lang="scss">
.randoms-preview {
  .el-col {
    padding: 10px 0;
  }
  .dialog-footer {
    text-align: right;
  }
}
.video {
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
